<!-- 免费咨询 -->
<template>
  <div>
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      :placeholder="true"
      title="免费咨询"
    ></van-nav-bar>
    <div class="charg-econsult">
      <!-- 输入任意文本 -->
      <van-field v-model="text" label="您的姓名" placeholder="请输入您的姓名" />
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field
        v-model="tel"
        type="tel"
        label="手机号"
        placeholder="请输入您的手机号"
      />
      <van-field
        v-model="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button
            @click="sendCode"
            size="small"
            class="auth-code"
            type="primary"
          >
            {{ isRun ? `${runTime}s后重新获取` : `获取验证码` }}
          </van-button>
        </template>
      </van-field>

      <!-- <div class="ce_basic"> -->
      <van-field
        v-model="value"
        label="驾照类型"
        disabled
        placeholder="请选择驾照类型"
        @click="showPopup"
      />
      <!-- <p>驾照类型</p> -->
      <!-- <select v-model="value" class="ce_type">
          <option v-for="(item, index) in genre" :key="index" :value="item">{{
            item
          }}</option>
        </select> -->
      <!-- <select class="ce_type">
          <option v-for="(item, index) in genre" :key="index" value>{{item}}</option>
        </select>-->
      <!-- </div> -->

      <div class="starting-point">
        <p>出发地点</p>
        <div>{{ site }}</div>
        <button class="inquire" @click="href('/GeographicalMap')">查询</button>
      </div>

      <div class="ce_button" @click="submit">提交</div>
      <div class="ce-policy">
        <img
          @click="hidden"
          v-if="policy1"
          src="../../assets/images/67.png"
          alt
        />
        <img
          @click="hidden"
          v-if="policy"
          src="../../assets/images/68.png"
          alt
        />
        <p>
          我已阅读并同意
          <span @click="contrsct">云驾校平台隐私政策</span>
        </p>
      </div>
      <van-popup v-model="atlas">内容</van-popup>
    </div>
    <!-- 弹出层 -->
    <van-popup
      v-model="showPopover"
      round
      position="bottom"
      :style="{ height: '40%' }"
    >
      <div
        v-for="(item, index) in genre"
        :key="index"
        class="van-popup-div"
        @click="incident(item)"
      >
        {{ item }}
      </div>
    </van-popup>
  </div>
</template>
<script>
import { Toast } from "vant";
import { Dialog } from "vant";
import {
  consultPhone,
  freeConsultation,
  opticalService
} from "../../assets/js/api/apply";
export default {
  name: "ChargEconsult",
  data() {
    return {
      text: "",
      tel: "",
      show: "",
      sms: "",
      policy: false,
      policy1: true,
      isRun: false,
      runTime: 60,
      value: "",
      atlas: false,
      obj: {},
      genre: [],
      id: "",
      site: "",
      jd: "",
      wd: "",
      showPopover: false
    };
  },

  created() {
    let dsBridge = require("dsbridge");
    dsBridge.call("goBack", "", function() {
      history.go(-1);
    });
  },
  mounted() {
    let _this = this;
    _this.id = _this.$route.params.id;
    opticalService(_this.id).then(res => {
      _this.genre = res.data;
      // console.log(this.genre);
    });
    if (sessionStorage.getItem("text")) {
      _this.text = sessionStorage.getItem("text");
    }
    if (sessionStorage.getItem("tel")) {
      _this.tel = sessionStorage.getItem("tel");
    }
    if (sessionStorage.getItem("sms")) {
      _this.sms = sessionStorage.getItem("sms");
    }
    if (sessionStorage.getItem("value")) {
      _this.value = sessionStorage.getItem("value");
    }
    if (sessionStorage.getItem("site")) {
      _this.site = sessionStorage.getItem("site");
    }
    if (sessionStorage.getItem("jd")) {
      _this.jd = sessionStorage.getItem("jd");
    }
    if (sessionStorage.getItem("wd")) {
      _this.wd = sessionStorage.getItem("wd");
    }
  },
  methods: {
    showPopup() {
      this.showPopover = true;
    },
    incident(item) {
      this.value = item;
      this.showPopover = false;
    },
    // 提交
    submit() {
      let _this = this;
      if (!_this.policy) {
        Toast.success("请先同意协议");
        // alert("请先同意");
        return;
      }
      if (_this.text == "") {
        Toast("请输入姓名");
        return;
      }
      if (_this.tel === "") {
        Toast("请输入手机号");
        return;
      }
      if (_this.sms === "") {
        Toast("请输入验证码");
        return;
      }
      if (_this.value === "") {
        Toast("请选择驾照类型");
        return;
      }
      if (_this.site == "") {
        Toast("请选择出发地点");
        return;
      }
      _this.obj = {
        name: _this.text,
        lxfs: _this.tel,
        vscode: _this.sms,
        jztype: _this.value,
        jgbh: _this.id,
        stupos: _this.site,
        jd: _this.jd,
        wd: _this.wd
      };
      // console.log(this.obj);
      freeConsultation(_this.obj).then(res => {
        // console.log(res);
        if (res.code == 0) {
          Dialog.alert({
            message: "提交成功，稍后驾校相关人员会与您联系，请保持电话畅通!"
            // theme: "round-button"
          }).then(() => {
            _this.onClickLeft();
            _this.eliminate();
            console.log("ccc");
            // // this.$router.go(0);
            // this.$router.go(0);
          });
        } else {
          Dialog.alert({
            message: res.msg
            // theme: "round-button"
          }).then(() => {
            // on close
          });
        }
      });
    },

    // 验证码
    sendCode() {
      // 发送验证码
      if (this.isRun) return;
      if (!/^1[3-9]\d{9}$/.test(this.tel)) {
        Dialog.alert({
          message: `手机号有误`
          // theme: "round-button"
        }).then(() => {
          // on close
        });
        return;
      }
      consultPhone(this.tel).then(res => {
        // console.log(res);
        Dialog.alert({
          message: `验证码：${res.msg}`
          // theme: "round-button"
        }).then(() => {
          this.sms = res.msg;
        });
      });
      this.isRun = true;
      this.autoTimer = setInterval(() => {
        if (this.runTime == 0) {
          this.runTime = 60;
          this.isRun = false;
          clearInterval(this.autoTimer);
          return;
        }
        this.runTime--;
      }, 1000);
    },

    onClickLeft() {
      this.eliminate();
      this.$router.go(-1);
    },
    hidden() {
      if (this.policy) {
        this.policy = false;
        this.policy1 = true;
      } else {
        this.policy = true;
        this.policy1 = false;
      }
    },
    // 跳转

    eliminate() {
      sessionStorage.removeItem("text");
      sessionStorage.removeItem("tel");
      sessionStorage.removeItem("sms");
      sessionStorage.removeItem("value");
      sessionStorage.removeItem("site");
      sessionStorage.removeItem("jd");
      sessionStorage.removeItem("wd");
    },

    contrsct() {
      this.$router.push({ path: "/Contract" });
    },
    href(url) {
      sessionStorage.setItem("text", this.text);
      sessionStorage.setItem("tel", this.tel);
      sessionStorage.setItem("sms", this.sms);
      sessionStorage.setItem("value", this.value);
      this.$router.push({ path: url });
    }
  },
  components: {
    // 注册确认框
    [Dialog.Component.name]: Dialog.Component
  }
};
</script>

<style></style>
